<template>
  <!-- 设置新密码 2018/3/7 11:44 zhangQ -->
  <div>
    <input style="display:none"><!-- for disable autocomplete on chrome -->
    <Form ref="newPwdFrom" label-position="left" :label-width="100" :model="newPwdFrom" :rules="ruleNewPwdFrom" @submit.native.prevent>
      <p class="prompt-title">请设置 <span>{{ userInfo && userInfo.data && userInfo.data.user? userInfo.data.user.loginName+'的':' ' }}</span> 新密码</p>
      <p class="prompt-descrip">建议使用数字、字母、字符的组合密码，提高密码安全等级</p>
      <!--<FormItem label="设置密码" v-if="false">-->
      <!--<i-input placeholder="设置密码" class="input" size="large" style="width: 316px" type="password"></i-input>-->
      <!--</FormItem>-->
      <FormItem label="设置密码" prop="userNewPwd">
        <i-input id="userNewPwd" placeholder="请输入6位以上的密码" class="input" size="large" style="width: 316px" type="text"
                 v-model="newPwdFrom.userNewPwd"
                 icon="eye" @on-click="inputTypeChange">
        </i-input>
        <!--<i-input placeholder="请输入6-8位密码" class="input" size="large" style="width: 316px" type="input"-->
        <!--v-model="newPwdFrom.userNewPwd"-->
        <!--v-show="isShowPwd"-->
        <!--icon="eye" @on-click="isShowPwd = !isShowPwd">-->
        <!--</i-input>-->
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: 'new-pwd-from',
    data () {
      let newPwdFrom = {
        userNewPwd: ''
      }
      let ruleNewPwdFrom = {
        userNewPwd: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            Vue: this,
            trigger: 'blur',
            validator (rule, value, callback) {
              let formatError = '请输入6位以上的密码'
              // let noExistError = '请输入6-8位密码'
              this.Vue.formValicade = false
              if (!value) {
                callback(new Error(formatError))
                return
              }
              let reg = /^[a-zA-Z0-9\u4e00-\u9fa5_-]{6,}$/
              if (!reg.test(value)) {
                callback(new Error(formatError))
                return
              }
              // 修改密码
              this.Vue.formValicade = true
            }
          }
        ]
      }
      let isShowPwd = false
      let formValicade = false
      let datas = { newPwdFrom, ruleNewPwdFrom, isShowPwd, formValicade }
      return datas
    },
    props: {
      userInfo: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {},
    watch: {
      formValicade (newVal) {
        if (newVal) {
          this.$emit('next', true, this.newPwdFrom.userNewPwd)
        } else {
          this.$emit('next', false)
        }
      }
    },
    methods: {
      inputTypeChange () {
        if ($('#userNewPwd input').attr('type') === 'password') {
          $('#userNewPwd input[type="password"]').attr('type', 'text')
          $('#userNewPwd i.ivu-icon-eye-disabled').removeClass('ivu-icon-eye-disabled').addClass('ivu-icon-eye')
        } else {
          $('#userNewPwd input[type="text"]').attr('type', 'password')
          $('#userNewPwd i.ivu-icon-eye').removeClass('ivu-icon-eye').addClass('ivu-icon-eye-disabled')
        }
      }
    },
    created () {
    },
    mounted () {
    },
    components: {}
  }
</script>

<style scoped>

</style>
